<template lang='pug'>
.znhj-two
  .carea
    .cbox(v-for="(item,index) in commodityArr",:key="item.id",:class="[index%2==0?'left':'']",@click.stop="to4Page(item)")
      img(:src="item.cmmdtyCode | newImgUrl(item.cmmdtyImageSrc)" @error="error").commodityImg
      p.msg {{item.cmmdtyName}}
      template(v-if="item.price == -1 || item.price=='' || item.saleType == '1' || item.availableQty == '0' || item.availableQty == ''")
        span.rmb
        span.now-price.wh 暂无报价
        span(v-if="item.basePrice != item.price && item.basePrice.length < 7 && item.price.length < 7 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
        span.brd {{item.sendFlagStr}}
        .wuhuoicon
      template(v-else)
        span.rmb &yen;
        span.now-price {{item.price}}
        span(v-if="item.basePrice != item.price && item.basePrice.length < 7 && item.price.length < 7 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
        span.brd {{item.sendFlagStr}}
  a(v-if="hasShowMore",:href="moreurl").showmore
    span 查看更多
    i 
</template>
<script>
import { pro } from '@/config/env'
import { unique } from '@/config/utils'
import fetch from '@/config/fetch'
import Spbox from './_spbox'

export default {
  data() {
    return {
      commodityArr: [],
      isshow: true,
      moreurl: '',
      hasShowMore: false,// 是否有showmore链接
    }
  },
  created() {
    if (!this.cdata[0].tag) {
      this.isshow = false
      return
    }
    if (this.cdata[0].tag.length != 0) {
      this.render()
    }
  },
  props: ['cdata'],
  methods: {
    render() {
      let c = this.cdata[0].tag[0].elementName // 智能货架标识
      let p = this.$store.state.position
      let callback = 'b' + Math.floor(Math.random() * 100000)
      fetch({
        url: `${pro}/homePage/getSmartShelfCmmdtysJsonp/${p.cityCode}_${p.storeLocation}_${c}_wap_3.2.2_${callback}.htm`,
        params: {},
        jsonpCallback: callback
      }).then(res => {
        if (res.resultMsg != '成功' || res.resultData.length <= 1) {
          this.isshow = false
          return
        }
        if (res.resultData.length % 2 !=0) {
          this.commodityArr = res.resultData.splice(0,res.resultData.length-1)
        }else {
          this.commodityArr = res.resultData
        }
        if (res.resultData[0].showMore == '') {
          this.hasShowMore = false
        } else {
          this.moreurl = res.resultData[0].showMore
          this.hasShowMore = true
        }
      })
    },
    to4Page(item) {
      this.$router.push({path:`/detail/${item.cmmdtyCode}/${item.supplierCode}`})
    },
    error(e) {
      e.target.src = "/static/images/pro-default.png"
    },
  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.znhj-two {
  width: _(750);
  .carea {
    width: 100%;
    overflow: hidden;
    .cbox {
      width: 50%;
      background-color: #fff;
      box-sizing: border-box;
      height: _(374);
      overflow: hidden;
      float: left;
      border-top: 1px solid #f0f0f0;
      position: relative;
      img {
        display: block;
        width: _(240);
        height: _(240);
        margin: 0 auto;
        margin-top: _(20);
      }
      .msg {
        display: block;
        width: _(326);
        height: _(37);
        line-height: _(37);
        margin: 0 auto;
        margin-top: _(9);
        font-size: _(26);
        color: #444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .wuhuoicon {
        width: _(140);
        height: _(140);
        background: url('/static/images/soldout.png');
        background-size: 100% 100%;
        z-index: 3;
        position: absolute;
        left:0;
        right:0;
        margin:auto;
        top:_(70);
      }
      .now-price,
      .old-price {
        display: inline-block;
        line-height: _(50);
      }
      .now-price,
      .rmb {
        font-size: _(30);
        color: #ff782d;
      }
      .rmb {
        font-size: _(22);
        margin-left: _(24);
      }
      .old-price {
        margin-left: _(13);
        font-size: _(26);
        color: #aaa;
        text-decoration: line-through
      }
      .brd {
        display: inline-block;
        margin-left: _(12);
        padding: 0 _(12);
        font-size: _(18);
        color: #ff782d;
        border: 1px solid #ff782d;
        border-radius: 100px;
        text-align: center;
        line-height: _(25);
      }
    }
    .left {
      border-right: 1px solid #f0f0f0;
    }
  }
  .showmore {
    clear: both;
    display: block;
    width: 100%;
    height: _(80);
    background-color: #fff;
    line-height: _(80);
    text-align: center;
    font-size: _(24);
    color: #666;
    border-top: 1px solid #f7f7f7;
    i {
      display: inline-block;
      margin-left: _(10);
      width: _(10);
      height: _(17);
      background: url('/static/images/rightb.png');
      background-size: 100% 100%;
    }
  }
}
</style>